<template>
  <div>
    <p v-if="msgType=='redPacket'" class="red-packet">
      <span class="name">{{creator}}: </span>
      <span class="bodyer" @click="grapRedPacket(msgBody)">
        <img src="http://p2ebqp10o.bkt.clouddn.com/img_rb.png">
        <span class="msg">{{msgBody.topic}}</span>
      </span>
    </p>
    <p v-else-if="msgType=='gift'" class="message" style="color:red;">
      <span class="name">{{creator}}: </span>
      <span class="msg">{{msgBody.userNick}},送出了'{{msgBody.giftName}}'X{{msgBody.amount}}</span>
    </p>
    <p v-else class="message">
      <badge v-if="!!level" :num="'LV'+ (level || 1)"></badge>
      <span class="name">{{creator}}: </span>
      <span class="msg">{{msgBody}}</span>
    </p>
  </div>
</template>
<script>
  export default {
    name: "chatBox",
    props: ["level", "msgType", "creator", "msgBody"],
    data() {
      return {};
    },
    mounted() {},
    computed: {},
    methods: {
      grapRedPacket(msgBody) {
        this.$emit("grap", msgBody);
      }
    }
  };

</script>
<style lang="scss" scoped>
  p {
    text-align: left;
    padding: 2px 10px;
    &.message {
      .level {
        width: 20px;
      }
      .name {
        font-size: 13px;
        color: #aaa;
      }
      .msg {
        padding-left: 5px;
        font-size: 14px;
      }
    }

    &.red-packet {
      .bodyer {
        position: relative;
        width: 60%;
        display: inline-block;
        height: 60px;
        overflow: hidden;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        .msg {
          position: absolute;
          left: 60px;
          top: 20px;
          color: white;
        }
      }
      .name {
        display: inline-block;
        height: 60px;
        vertical-align: top;
        color: #aaa;
      }
    }
  }

</style>

